<template>
<div>
<div class="con" z-inex="1999">
    <section v-if="detailsNum==1" class="sec">
      <el-table
        :show-header="false"
        :data="accNull==1?tableDatas:tableData"
        center
        border
        :cell-style="columnStyle"
        :span-method="arraySpanMethod"
        style="width: 100%; margin-top: 10px;"
      >
        <el-table-column width="180" prop="name" center />
        <el-table-column prop="amount1" />
      </el-table>
    </section>
    <!-- 抢修与报修附件 -->
    <el-table
      v-if="accNull==2&&detailsNum==1"
      :data="seeDetails"
      border
      style="width: 100%"
      center
    >
      <el-table-column
       type="index"
        
      />
     <el-table-column
          prop="file_type"
          label="类型"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" type="info">{{ scope.row.file_type == '2' ? '文件' : '图片' }}</el-tag>
          </template>
        </el-table-column>
      <el-table-column
        prop="file_name"
        label="名称"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
             <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
           
             <el-button
              type="primary"
              size="mini"
              @click="handleUp(scope.$index, scope.row)"
            >
              下载
            </el-button>
             
        </template>
      </el-table-column>
    </el-table>
    <section v-if="detailsNum==2" class="sec">
      <el-table
        :show-header="false"
        :data="accNull==1?tableDatas1:tableData1"
        center
        border
        :cell-style="columnStyle"
        :span-method="arraySpanMethod1"
        style="width: 100%; margin-top: 10px;"
      >
        <el-table-column width="180" prop="name" center />
        <el-table-column prop="amount1" />
      </el-table>
    </section>
    <!-- 巡检与试验附件 -->
    <el-table
      v-if="accNull==2&&detailsNum==2"
      :data="seeDetails"
      border
      style="width: 100%"
      center
    >
      <el-table-column
        type="index"
     
      />
      <el-table-column
          prop="file_type"
          label="类型"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag effect="dark" type="info">{{ scope.row.file_type == '2' ? '文件' : '图片' }}</el-tag>
          </template>
        </el-table-column>
      <el-table-column
        prop="file_name"
        label="名称"
      />
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
              type="success"
              size="mini"
              @click="checkInfo(scope.row)"
            >
              查看
            </el-button>
             <el-button
              type="danger"
              size="mini"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>

          



             <el-button
              type="primary"
              size="mini"
              @click="handleUp(scope.$index, scope.row)"
            >
              下载
            </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
      <!-- 图片预览 -->
    <el-image-viewer z-inex="3000" v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</div>

</template>
<script>
import { deleteAccessory, seeAccessory, taskDetail1, taskDetail, deleteAccessory1, seeAccessory1, taskDetail5,deleteAccessory2, seeAccessory2,seeAccessory9 } from '@/api/order'

export default {
  name: 'detail',
  // eslint-disable-next-line vue/require-prop-types
  props: ['detailsNum', 'detStaus', 'accids'],
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return {
    // 请求回来的数据
      dataForm: {},
      ids:'',
      closeds: false,
      accidsWatchee: '', // 监听子组件id值
      rowDetail: '', // 详情数据
      accNull: '',// 判断有无组件
       imgViewerVisible: false, // 图片预览标识
         imgList: [], // 预览图片数据

    }
  },
  computed: {
  // 因为数据用到了dataform中的数据，所以写在了computed中
    tableData() {
      return [

        {
          name: '任务编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '工单编号',
          amount1: this.rowDetail.work_num
        },

        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '任务标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '任务内容',
          amount1: this.rowDetail.task_content

        },
        {
          name: '开始时间',
          amount1: this.rowDetail.task_start

        },
        {
          name: '结束时间',
          amount1: this.rowDetail.task_end

        },
        {
          name: '创建人',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '附件'
        }
      ]
    },
    tableDatas() {
      return [

        {
          name: '任务编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '工单编号',
          amount1: this.rowDetail.work_num
        },

        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '任务标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '任务内容',
          amount1: this.rowDetail.task_content

        },
        {
          name: '开始时间',
          amount1: this.rowDetail.task_start

        },
        {
          name: '结束时间',
          amount1: this.rowDetail.task_end

        },
        {
          name: '创建人',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '无上传附件'
        }
      ]
    },
    tableData1() {
      return [
        {
          name: '计划编号',
          amount1: this.rowDetail.task_num
        },
        {
          name: '任务编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '计划标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '计划内容',
          amount1: this.rowDetail.task_content

        },
        {
          name: '计划周期',
          amount1: this.rowDetail.task_start

        },
        {
          name: '开始时间',
          amount1: this.rowDetail.task_start

        },
        {
          name: '结束时间',
          amount1: this.rowDetail.task_end

        },
        {
          name: '创建人',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '附件'
        },
        {
          name: '无上传附件'
        }
      ]
    },
    tableDatas1() {
      return [
        {
          name: '计划编号',
          amount1: this.rowDetail.task_num
        },
        {
          name: '任务编号',
          amount1: this.rowDetail.work_num
        },
        {
          name: '站点',
          amount1: this.rowDetail.site_name
        },
        {
          name: '计划标题',
          amount1: this.rowDetail.task_title

        },
        {
          name: '计划内容',
          amount1: this.rowDetail.task_content

        },
        {
          name: '计划周期',
          amount1: this.rowDetail.task_start

        },
        {
          name: '开始时间',
          amount1: this.rowDetail.task_start

        },
        {
          name: '结束时间',
          amount1: this.rowDetail.task_end

        },
        {
          name: '创建人',
          amount1: this.rowDetail.user_name

        },
        {
          name: '创建时间',
          amount1: this.rowDetail.created_at

        },
        {
          name: '无上传附件'
        }
      ]
    }
  },
  watch: {
    accids() {
      this.accidsWatchee = this.accids
      this.handleClick()
      this.getDetail()
    }
  },
  created() {
    this.getDetail()
    // this.handleClick()
  },
  methods: {
    // 详情
    getDetail() {
      this.rowDetail={}
      const that = this
      console.log('detStaus',this.detStaus)
      if (this.detStaus == '报修') {
        taskDetail({ work_num : that.accids }).then(res => {
          that.rowDetail = res.data
          this.ids= that.rowDetail.id
          this.handleClick()
        })
      } else if (this.detStaus == '抢修') {
        taskDetail1({ work_num : that.accids }).then(res => {
          that.rowDetail = res.data
          this.ids= that.rowDetail.id
          this.handleClick()
          console.log('结果1' + that.rowDetail)
        })
      } else {
        taskDetail5({ work_num : that.accids }).then(res => {
          that.rowDetail = res.data
          this.ids= that.rowDetail.id
          this.handleClick()
          console.log('结果2' + that.rowDetail)
        })
      }
    },
    // 附件
    handleClick() {
      const that = this
      console.log('附件id' + that.accids)
      const data = {
        task_id: that.ids,
        offset: 0,
        limit: 50
      }
      if (this.detStaus == '报修') {
        seeAccessory(data).then(res => {
          if (res.code == 200) {
            this.seeDetails = res.data.files
            if (this.seeDetails.length == 0) {
              that.accNull = 1
            } else {
              that.accNull = 2
            }
            this.seeDetails.forEach(item => {
              if (item.file_type == 1) {
                item.file = '图片'
              } else {
                item.file= '文件'
              }
            })
          }
        })
      } else if (this.detStaus == '抢修') {
        console.log('qi修附件')
        seeAccessory1(data).then(res => {
          console.log(22323232)
          if (res.code == 200) {
            this.seeDetails = res.data.files
            if (this.seeDetails.length == 0) {
              that.accNull = 1
            } else {
              that.accNull = 2
            }
            this.seeDetails.forEach(item => {
              if (item.file_type == 1) {
                item.file_type = '图片'
              } else {
                item.file_type = '文件'
              }
            })
          }
        })
      } else {    
          const data1 = {
        task_id: that.ids,
        offset: 0,
        limit: 50
      }
        seeAccessory9(data1).then(res => {
          console.log(22323232)
          if (res.code == 200) {
            this.seeDetails = res.data.files
            if (this.seeDetails.length == 0) {
              that.accNull = 1
            } else {
              that.accNull = 2
            }
            this.seeDetails.forEach(item => {
              if (item.file_type == 1) {
                item.file_type = '图片'
              } else {
                item.file_type = '文件'
              }
            })
          }
        })
      }
    },
     /**
     * @description: 查看附件/图片
     * @author: 书童
     */
    checkInfo(row) {
      console.log(row.file_url)
      console.log(row.file_type)

      if (row.file_type === '1') {
        // 图片
        console.log('内容为图片')
        this.imgViewerVisible = true
        this.imgList = [row.file_url]
      } else {
        // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.file_url)
        window.open( row.file_url)
      }
    },
        // 关闭图片预览
    closeImgViewer() {
      this.imgViewerVisible = false
    },
    // 删除附件
    handleDelete(a, b) {
      console.log(a)
      const that = this
      if (this.detStaus == '报修') {
        deleteAccessory({ id: b.id.toString() }).then(res => {
          that.handleClick()
        })
      } else if (this.detStaus == '抢修') {
        deleteAccessory1({ id: b.id.toString() }).then(res => {
          that.handleClick()
        })
      } else {
        deleteAccessory2({ id: b.id.toString() }).then(res => {
          that.handleClick()
        })
      }
    },
    // 下载附件
    handleUp(a,b){
      window.open(b.file_url, '_blank');
      
    },
    // 自定义列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex == 0 || columnIndex == 1 || columnIndex == 3) {
      //   // 第三第四列的背景色就改变了2和3都是列数的下标
      //   return 'background:#f3f6fc;'
      // } else {
      //   return 'background:#ffffff;'
      // }
    },
    // 和并列
    arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 把列合并为行
      if (rowIndex === 9 || rowIndex === 10) { //  首先筛选行数 0 ， 2 ，4
        if (columnIndex === 0) { // 当列数为0，开始，
          return [1, 2] // 把2列合并为一行
        }
      }
    },
    arraySpanMethod1({ row, column, rowIndex, columnIndex }) { // 把列合并为行
      if (rowIndex === 10 || rowIndex === 11) { //  首先筛选行数 0 ， 2 ，4
        if (columnIndex === 0) { // 当列数为0，开始，
          return [1, 2] // 把2列合并为一行
        }
      }
    },
    closed() {
      this.$emit('details', this.closeds)
    }
  }
}
</script>
<style lang="scss" scoped>
.sec{
  // position:relative
}
.btnBox{
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
  // border-top:1px solid #eee;
}
::v-deep.el-table .cell {
  text-align: center;
}
  // .btn{
  //   float: right;
  // }

</style>

